<template>
<div class="cont-wrapper nva_menu_container">
  <div class="menu_container wst">
    <navMenu v-if="userData.roleKey === 'city'" ref="menu" title="成绩统计与发布" @select="select"></navMenu>
    <div v-else>
      <contSidebar v-if="list.length" name="成绩管理" :activeItem="activeItem" ref="cmenu" :siderList="list" @handleAcitve="handleAcitve"></contSidebar>
    </div>
  </div>
  <div class="block-container container" @click="showIdex=null">
    <p class="title">
      成绩管理
      <a v-if="userData.roleKey === 'city'" href="javascript:;" @click="publicExam" >发布全部成绩</a>
    </p>
    <div class="info-search diy-search" style="width: calc(100% -20px);">
      <div class="item">
        <label for="">
          考点:
          <el-select v-model="form.area" placeholder="请选择活动区域" class="diy-input">
            <el-option v-for="(item,idx) in kd" :key="idx" :label="item.areaName" :value="item.id"></el-option>
          </el-select>
          <!-- <el-select v-else v-model="form.area" placeholder="请选择活动区域" class="diy-input">
            <el-option v-for="(item,idx) in list" :key="idx" :label="item.name" :value="item.id"></el-option>
          </el-select> -->
        </label>
      </div>
      <div class="item">
        <label for="">
          考生姓名:
          <input type="text" v-model="form.stuName">
        </label>
      </div>
      <div class="item">
        <label for="">
        考试时间:
        <el-date-picker
          v-model="form.examTime"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </label>
      </div>
      <div class="item">
        <label for="">
          准考证号:
          <input type="text" v-model="form.stuCode">
        </label>
      </div>
      <a href="javascript:;" class="save" @click="searchResult">搜索</a>
    </div>
    <div class="operation">
      <a href="javascript:;" class="save">统计成绩</a>
      <a v-if="(schoolId && className) || activeItem" :href='GLOBAL.COMMON+"/examscore/print_excel?areaId="+ (schoolId?schoolId:activeItem) +"&className=" + (className?className:"")' class="save">打印成绩</a>
      <a v-else class="save" href="javascript:;" @click="$message.error( schoolId? '请先选择需要打印的班级':'请先选择需要打印的学校')">打印成绩</a>
    </div>
    <div class="exam-info">
      <p>
        <span>考点：{{school}}</span>
        <span>总计：{{page.total}}人</span>
      </p>
    </div>
    <table class="table" border="1" cellspacing="0" cellpadding="0" borderColor="#e0e0e0">
      <thead>
        <tr>
          <td>#</td>
          <td>考生姓名</td>
          <td>性别</td>
          <td>准考证号</td>
          <td>考场号</td>
          <td>考试时间</td>
          <td>批次</td>
          <td>座位号</td>
          <td>实验名称</td>
          <td>成绩</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody v-if="ks.length" v-loading="loading">
        <tr v-for="(item,i) in ks" :key="i">
          <td>{{i+1}}</td>
          <td>{{item.student.name}}</td>
          <td>{{item.student.sex}}</td>
          <td>{{item.stuCode}}</td>
          <td>{{item.paper.code}}</td>
          <td>{{getExamTime(item.beginDate)}} - {{getExamTime(item.endDate)}}</td>
          <td>{{item.batch}}</td>
          <td>{{item.seatCode}}</td>
          <td>{{item.paper.expName}}</td>
          <td>{{item.score}}</td>
          <td style="position:relative">
            <i class="el-icon-more" @click.stop="showIdex = i"></i>
            <div class="show-video" v-show="showIdex==i">
                <p><span class="grade"></span>查看试卷</p>
            </div>
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td colspan="11">
            <p>未找到任何数据</p>
          </td>
        </tr>
      </tbody>
    </table>
    <pagination v-if="ks.length" :listQuery="page" @changeCurrentPage="changeCurrentPage"></pagination>
  </div>
</div>
</template>

<script>
import navMenu from '@/components/ContMenu.vue'
import contSidebar from '@/components/navSidebar.vue'
import pagination from '@/components/Pagination.vue'
export default {
  data () {
    return {
      ks: [],
      showIdex: null,
      school: '镇海中学',
      time: '',
      userData: '',
      activeItem: 1,
      list: [],
      kd: [],
      area: '',
      form: {
        area: null,
        stuName: '',
        stuCode: '',
        examTime: ''
      },
      page: {
        page: 1,
        pageSize: 10,
        total: null,
        totalPages: null
      },
      schoolId: '',
      className: '',
      loading: false
    }
  },
  methods: {
    // nav回调
    select (id, name) {
      console.log(id, name)
      this.school = name
      this.activeItem = id
      this.form.area = null
      this.getSchoolScores()
    },
    // nav回调
    handleAcitve (obj) {
      console.log('obj', obj)
      this.activeItem = obj.id
      this.school = obj.name
      if (this.userData.roleKey === 'school') {
        this.className = obj.name
      } else {
        this.form.area = null
      }
      this.getSchoolScores()
    },
    // 根据用户角色初始化数据
    async initData () {
      if (this.userData.roleKey === 'school') {
        let res = await this.$http.getArea()
        for (let x = 0; x < res.data.child.length; x++) {
          for (let y = 0; y < res.data.child[x].child.length; y++) {
            // this.kd.push({
            //   id: res.data.child[x].child[y].id,
            //   name: res.data.child[x].child[y].areaName
            // })
            if (res.data.child[x].child[y].areaName === sessionStorage.getItem('schoolName')) {
              this.schoolId = res.data.child[x].child[y].id
              // this.form.area = parseInt(res.data.child[x].child[y].id)
            }
          }
        }
        console.log('res', this.schoolId)
        let school = await this.$http.getClassList({
          schoolName: sessionStorage.getItem('schoolName')
          // schoolName: '镇海仁爱中学'
        })
        if (school.code === 20000) {
          for (let i = 0; i < school.data.length; i++) {
            this.list.push({
              id: i,
              name: school.data[i]
            })
          }
        }
        if (this.list.length) {
          this.activeItem = this.list[0].id
          this.scholl = sessionStorage.getItem('schoolName')
          this.className = this.list[0].name
        }
      } else {
        let res = await this.$http.getArea()
        if (res.code === 20000) {
          // 市级
          if (this.userData.roleKey === 'city') {
            let obj = res.data.child
            this.list = []
            for (let i = 0; i < obj.length; i++) {
              for (let j = 0; j < obj[i].child.length; j++) {
                this.list.push({
                  id: obj[i].child[j].id,
                  name: obj[i].child[j].areaName
                })
              }
            }
          } else if (this.userData.roleKey === 'county') {
            // 县级
            let obj = res.data.child
            this.list = []
            for (let i = 0; i < obj.length; i++) {
              if (this.area === obj[i].areaName) {
                // this.list = obj[i].child
                for (let j = 0; j < obj[i].child.length; j++) {
                  this.list.push({
                    id: obj[i].child[j].id,
                    name: obj[i].child[j].areaName
                  })
                }
              }
            }
          }
          this.activeItem = this.list[0].id
          this.school = this.list[0].name
          // this.form.area = this.list[0].id
        }
      }
      this.getSchoolScores()
      // console.log()
    },
    // 获取成绩列表
    async getSchoolScores () {
      this.loading = true
      let res = await this.$http.getSchoolScore({
        areaId: this.schoolId ? this.schoolId : this.activeItem,
        className: this.className ? this.className : '',
        pageNum: this.page.page,
        pageSize: this.page.pageSize
      })
      if (res.code === 20000) {
        this.ks = res.data.data
        this.page.totalPages = res.data.pageInfo.pageTotal
        this.page.total = res.data.pageInfo.totalSize
      } else {
        this.$message.error(res.msg)
      }
      this.loading = false
    },
    // 发布考试成绩
    publicExam () {
      this.$confirm('是否发布成绩?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        this.$http.publicExam().then(res => {
          if (res.code === 20000) {
            this.$message.success('发布考试成绩成功！')
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消发布'
        })
      })
    },
    // 分页跳转
    changeCurrentPage (queryData) {
      this.page.page = queryData.page
      this.page.pageSize = queryData.pageSize
      this.getSchoolScores()
    },
    // 考试成绩查询
    async searchResult () {
      this.loading = true
      // this.activeItem = this.form.area
      // console.log('user', this.userData.roleKey)
      this.page.page = 1
      let res = await this.$http.scoreSearch({
        pageNum: this.page.page,
        pageSize: this.page.pageSize,
        examTime: this.form.examTime,
        pointId: this.form.area,
        stuCode: this.form.stuCode,
        stuName: this.form.stuName
      })
      console.log('res', res)
      if (res.code === 20000) {
        this.ks = res.data.data
        this.page.totalPages = res.data.pageInfo.pageTotal
        this.page.total = res.data.pageInfo.totalSize
        this.activeItem = null
        this.className = ''
        this.kd.map(item => {
          if (item.id === this.form.area) {
            this.school = item.areaName
          }
        })
        if (this.userData.roleKey === 'city') {
          this.$refs.menu.changeActive('')
        } else {
          this.$refs.cmenu.setActiveId(null)
        }
        //  this.$refs.menu.changeActive(null)
      } else {
        this.$message.error(res.msg)
      }
      this.loading = false
    },
    // 格式化考试时间
    getExamTime (obj) {
      var date = new Date(obj)
      var y = 1900 + date.getYear()
      var m = '0' + (date.getMonth() + 1)
      var d = '0' + date.getDate()
      return y + '/' + m.substring(m.length - 2, m.length) + '/' + d.substring(d.length - 2, d.length)
    },
    async getPoint () {
      let res = await this.$http.getPoint('')
      if (res.code === 20000) {
        this.kd = res.data
        // this.form.area = res.data[0].id
        // for(let i = 0; i < res.data.length; i++) {
        //   this.kd.push({
        //     id: res.data[i].id,
        //     name: res.data[i].name
        //   })
        // }
      }
    }
  },
  mounted () {
    this.userData = JSON.parse(sessionStorage.getItem('userData'))
    this.area = sessionStorage.getItem('area')
    console.log(this.area)
    this.getPoint()
    this.initData()
  },
  components: {
    navMenu,
    contSidebar,
    pagination
  }
}
</script>

<style lang="stylus" scoped>
color = #4177ff
background = #f3f3f3
@import url('../../assets/styles/base.css');
.container
  margin-left: 190px;
  width: calc(100% - 240px);
  .operation
    margin-top 20px
    a
      display inline-block
      width 80px
      height 30px
      text-align center
      line-height 30px
      border-radius 5px
      color #fff
      text-decoration none
      margin-right 14px
      font-size 14px
      &.save
        background color
  .exam-info
    width 100%
    height 48px
    line-height 48px
    background #3d68d5
    position: relative;
    top: 26px;
    p
      span
        margin-left 20px
        color #fff
        font-size 12px
        font-weight bold
      a
        float right
        margin-right 40px
        color #fff
        font-size 12px
        text-decoration none
  .table
    width 100%
    margin-top 25px
    text-align center
    td
      border 1px solid #e0e0e0
      line-height 48px
      text-align center
    thead
      tr
        background background
        td
          height 48px
          font-weight bold
    tbody
      tr
        &:hover
          background #f9faff
        td
          height 46px
          font-size 14px
          min-width 40px
          .show-video
            background #fff
            box-shadow: 0px 0px 1px #ccc;
            width 112px
            height 40px
            z-index 9
            left -24px
            position absolute
            p
              &:hover
                color color
                span
                  &.grade
                    background url('../../assets/img/city/grade_active.png') no-repeat
                  &.video
                    background url('../../assets/img/city/voide_active.png') no-repeat
              span
                display inline-block
                width 16px
                height 16px
                margin-right 10px
                &.grade
                  background url('../../assets/img/city/grade.png') no-repeat
                &.video
                  background url('../../assets/img/city/voide.png') no-repeat
  .title
    line-height 18px
    padding-bottom 4px
    margin-bottom 20px
    a
      display inline-block
      float right
      background color
      color #fff
      font-size 14px
      padding 8px 8px
      font-weight normal
      border-radius 4px
      text-decoration none
</style>
<style>
  .diy-search {
    display: flex;
    padding-left: 20px;
  }
  .diy-search .item {
    flex-grow: 1;
  }
  .diy-search label {
    margin-left: 0;
    margin-right: 0;
  }
  .diy-search label .el-select.diy-input {
    width: calc(100% - 60px);
  }
  .diy-search .item label .el-select.diy-input input {
    width: 100%;
  }
  .diy-search label .diy-input input.el-input__inner {
    font-size: 12px;
  }
  .el-date-editor input.el-input__inner {
    font-size: 12px;
  }
  .diy-search .item label input {
    width: calc(100% - 90px);
  }
  .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
    width: calc(100% - 90px)
  }
  .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date input {
    width: 100%;
  }
</style>
